<template>
	<view class="container">
		<view class="title">
			<view class="icons-left">
				<uni-icons type="left" size="20"></uni-icons>
			</view>
			<text>我的钱包</text>
		</view>
		<!-- 余额 -->
		<view class="surplus warrper">
			<image src="/static/我的收益_slices/Group 287@2x.png" style="width: 686rpx;height: 322rpx;z-index: 1;position: absolute;"></image>
			<view class="sub-surplus">
				<text style="font-size: 24rpx;color: rgba(255, 255, 255, 0.9);">账户余额</text><br>
				<text style="font-weight: bold;font-size: 56rpx;color: #FFF;">3212.00</text>
			</view>
			<button class="payouts">提现</button>
			<view class="cashs">
				<view class="cash">
					<text style="font-size: 24rpx;color: rgba(255,255,255,0.9);">可提现现金</text><br>
					<text style="font-weight: bold;font-size: 36rpx;color: #FFF;">30.00</text>
				</view>
				<view class="cash">
					<text style="font-size: 24rpx;color: rgba(255,255,255,0.9);">冻结金额</text><br>
					<text style="font-weight: bold;font-size: 36rpx;color: #FFF;">12.00</text>
				</view>
			</view>
			<view class="cash2">
				<view class="sub-cash2">
					<button class="sub-payouts">
						<image src="/static/我的收益_slices/general／icon／提现.png" style="width: 32rpx;height: 32rpx;"></image>
						<text style="font-size: 24rpx;margin-left:8rpx;">提现记录</text>
					</button>
					<image src="/static/我的收益_slices/Rectangle 817@2x.png" style="width:2rpx;height: 40rpx;margin-left: 344rpx;"></image>
					<button class="sub-payouts2">
						<image src="/static/我的收益_slices/general／icon／收益.png" style="width: 32rpx;height: 32rpx;"></image>
						<text style="font-size: 24rpx;margin-left:8rpx;">提现规则</text>
					</button>
				</view>
			</view>
		</view>
		<!-- 账单明细 -->
		<view class="bill1 warrper">
			<view style="display: flex; width: 622rpx;height: 72rpx;margin-left: 32rpx;">
				<view style="display: flex; width: 148rpx;height: 44rpx;margin-top: 14rpx;">
					<view style="width: 4rpx;height: 32rpx;background: #007AFF;margin-top: 6rpx;"></view>
					<text style="margin-left: 16rpx;font-weight: 500;font-size: 32rpx;line-height: 44rpx;">账单明细</text>
				</view>
				<view class="month1" style="width: 92rpx;height: 44rpx;margin-top: 28rpx;margin-left: 382rpx;">
					<text style="font-weight: bold;font-size: 32rpx;line-height: 44rpx;color: rgba(0,0,0,0.8);">10</text>
					<text style="font-size: 24rpx;color: rgba(0,0,0,0.8);line-height: 40rpx;">月</text>
					<text></text>
				</view>
			</view>
			<!-- 商家流水 -->
			<view class="warrper" style="width: 622rpx;height: 880rpx;margin-top: 32rpx;padding-top: 20rpx;overflow: hidden;">
				<!-- 1 -->
				<view class="Merchant" style="display: flex;margin-bottom: 16rpx;">
					<view style="width: 220rpx;height: 72rpx;margin-right: 10rpx;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.8);line-height: 40rpx;">订单-87297520848</text><br>
						<view style="width: 220rpx;height: 32rpx;font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">
							<text style="margin-right: 16rpx;">2023-10-03</text>
							<text>18:10:23</text>
						</view>
					</view>
					<view style="width: 235rpx;height: 72rpx;text-align: center;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.4);line-height: 40rpx;">+100.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">返利</view>
					</view>
					<view style="width: 146rpx;height: 76rpx;margin-left: 12rpx;text-align: right;">
						<text style="font-weight: bold;font-size: 28rpx;color: #362008;line-height: 44rpx;">300.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">余额</view>
					</view>
				</view>
				<!-- 2 -->
				<view class="Merchant" style="display: flex;margin-bottom: 16rpx;">
					<view style="width: 220rpx;height: 72rpx;margin-right: 10rpx;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.8);line-height: 40rpx;">订单-87297520848</text><br>
						<view style="width: 220rpx;height: 32rpx;font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">
							<text style="margin-right: 16rpx;">2023-10-03</text>
							<text>18:10:23</text>
						</view>
					</view>
					<view style="width: 235rpx;height: 72rpx;text-align: center;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.4);line-height: 40rpx;">+100.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">返利</view>
					</view>
					<view style="width: 146rpx;height: 76rpx;margin-left: 12rpx;text-align: right;">
						<text style="font-weight: bold;font-size: 28rpx;color: #362008;line-height: 44rpx;">300.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">余额</view>
					</view>
				</view>
				<!-- 3 -->
				<view class="Merchant" style="display: flex;margin-bottom: 16rpx;">
					<view style="width: 220rpx;height: 72rpx;margin-right: 10rpx;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.8);line-height: 40rpx;">订单-87297520848</text><br>
						<view style="width: 220rpx;height: 32rpx;font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">
							<text style="margin-right: 16rpx;">2023-10-03</text>
							<text>18:10:23</text>
						</view>
					</view>
					<view style="width: 235rpx;height: 72rpx;text-align: center;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.4);line-height: 40rpx;">+100.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">返利</view>
					</view>
					<view style="width: 146rpx;height: 76rpx;margin-left: 12rpx;text-align: right;">
						<text style="font-weight: bold;font-size: 28rpx;color: #362008;line-height: 44rpx;">300.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">余额</view>
					</view>
				</view>
				<!-- 4 -->
				<view class="Merchant" style="display: flex;margin-bottom: 16rpx;">
					<view style="width: 220rpx;height: 72rpx;margin-right: 10rpx;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.8);line-height: 40rpx;">订单-87297520848</text><br>
						<view style="width: 220rpx;height: 32rpx;font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">
							<text style="margin-right: 16rpx;">2023-10-03</text>
							<text>18:10:23</text>
						</view>
					</view>
					<view style="width: 235rpx;height: 72rpx;text-align: center;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.4);line-height: 40rpx;">+100.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">返利</view>
					</view>
					<view style="width: 146rpx;height: 76rpx;margin-left: 12rpx;text-align: right;">
						<text style="font-weight: bold;font-size: 28rpx;color: #362008;line-height: 44rpx;">300.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">余额</view>
					</view>
				</view>
				<!-- 5 -->
				<view class="Merchant" style="display: flex;margin-bottom: 16rpx;">
					<view style="width: 220rpx;height: 72rpx;margin-right: 10rpx;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.8);line-height: 40rpx;">订单-87297520848</text><br>
						<view style="width: 220rpx;height: 32rpx;font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">
							<text style="margin-right: 16rpx;">2023-10-03</text>
							<text>18:10:23</text>
						</view>
					</view>
					<view style="width: 235rpx;height: 72rpx;text-align: center;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.4);line-height: 40rpx;">+100.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">返利</view>
					</view>
					<view style="width: 146rpx;height: 76rpx;margin-left: 12rpx;text-align: right;">
						<text style="font-weight: bold;font-size: 28rpx;color: #362008;line-height: 44rpx;">300.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">余额</view>
					</view>
				</view>
				<!-- 6 -->
				<view class="Merchant" style="display: flex;margin-bottom: 16rpx;">
					<view style="width: 220rpx;height: 72rpx;margin-right: 10rpx;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.8);line-height: 40rpx;">订单-87297520848</text><br>
						<view style="width: 220rpx;height: 32rpx;font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">
							<text style="margin-right: 16rpx;">2023-10-03</text>
							<text>18:10:23</text>
						</view>
					</view>
					<view style="width: 235rpx;height: 72rpx;text-align: center;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.4);line-height: 40rpx;">+100.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">返利</view>
					</view>
					<view style="width: 146rpx;height: 76rpx;margin-left: 12rpx;text-align: right;">
						<text style="font-weight: bold;font-size: 28rpx;color: #362008;line-height: 44rpx;">300.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">余额</view>
					</view>
				</view>
				<!-- 7 -->
				<view class="Merchant" style="display: flex;margin-bottom: 16rpx;">
					<view style="width: 220rpx;height: 72rpx;margin-right: 10rpx;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.8);line-height: 40rpx;">订单-87297520848</text><br>
						<view style="width: 220rpx;height: 32rpx;font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">
							<text style="margin-right: 16rpx;">2023-10-03</text>
							<text>18:10:23</text>
						</view>
					</view>
					<view style="width: 235rpx;height: 72rpx;text-align: center;">
						<text style="font-size: 24rpx;color: rgba(0,0,0,0.4);line-height: 40rpx;">+100.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">返利</view>
					</view>
					<view style="width: 146rpx;height: 76rpx;margin-left: 12rpx;text-align: right;">
						<text style="font-weight: bold;font-size: 28rpx;color: #362008;line-height: 44rpx;">300.00</text>
						<view style="font-size: 20rpx;color: rgba(0,0,0,0.4);line-height: 32rpx;">余额</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="datetime">
			<text class="day-week">星期三</text>
			<text class="date">2023-10-03</text>
		</view> -->
		<!-- <view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：</text>
		<uni-link :href="href" :text="href"></uni-link> -->
	</view>
</template>

<script>
	// export default {
	// 	data() {
	// 		return {
	// 			href: 'https://uniapp.dcloud.io/component/README?id=uniui'
	// 		}
	// 	},
	// 	methods: {

	// 	}
	// }
</script>

<style>
	.container{
		width: 750rpx;
		height: 1624rpx;
		background: linear-gradient( 180deg, #E3F1FF 1%, #FAFBFB 59%);
		overflow: hidden;
	}
	.icons-left{
		margin-left: 34rpx;
		margin-right: 240rpx;
	}
	.title{
		display: flex;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 110rpx;
	}
	.warrper{
		margin: 0 auto;
		width: 686rpx;
	}
	.surplus{
		position: relative;
		margin-top: 56rpx;
	}
	.sub-surplus{
		width: 200rpx;
		height: 105rpx;
		margin-top: 48rpx;
		margin-left: 48rpx;
		z-index: 2;
		position: absolute;	
	}
	.payouts{
		width: 136rpx;
		color: #fff;
		font-size: 26rpx;
		margin-left: 502rpx;
		margin-top: 72rpx;
		background: rgba(255,255,255,0.3);
		border-radius: 62rpx 62rpx 62rpx 62rpx;
		z-index: 2;
		position: absolute;	
	}
	.cashs{
		display: flex;
		justify-content: space-between;
		width: 590rpx;
		height: 86rpx;
		margin-top: 204rpx;
		margin-left: 48rpx;
		z-index: 2;
		position: absolute;	
	}
	.cash{
		width: 244rpx;
		height: 86rpx;
		
	}
	.cash2{
		width: 684rpx;
		height: 154rpx;
		margin-top: 248rpx;
		background: #E4F1FF;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(3,48,97,0.08);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		z-index: 0;
		position: absolute;
	}
	.sub-cash2{
		display: flex;
		width: 684rpx;
		height: 40rpx;
		margin-top: 96rpx;
		/* background-color: pink; */
		position: absolute;
	}
	.sub-payouts{
		display: flex;
		height: 34rpx;
		line-height: 34rpx;
		background-color: transparent !important;
		border: none !important;
		z-index: 1;
		position: absolute;
		margin-left: 98rpx;
		padding-top: 4rpx;
	}
	.sub-payouts2{
		display: flex;
		height: 34rpx;
		line-height: 34rpx;
		background-color: transparent !important;
		border: none !important;
		z-index: 1;
		position: absolute;
		margin-left: 426rpx;
		padding-top: 4rpx;
	}
	.sub-payouts2::after{
		border: none !important;
	}
	.sub-payouts::after{
		border: none !important;
	}
	.bill1{
		width: 686rpx;
		height: 1064rpx;
		background: #FFF;
		margin-top: 500rpx;
		padding-top: 40rpx;
		box-shadow: 0rpx 8rpx 48rpx 0rpx rgba(0,0,0,0.05);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>
